<template>
    <div v-if="isUrl" :style="urlIconStyle" class="url-svg svg-icon icon" />
    <svg v-else class="svg-icon icon" :style="iconStyle">
        <use :href="iconName" />
    </svg>
</template>

<script setup>
import { computed,defineProps,withDefaults} from 'vue'
import { isExternal } from '@/utils/common'


const props = withDefaults(defineProps(), {
    name: '',
    size: '',
    color: '',
})

const s = `${props.size.replace('px', '')}px`
const iconName = computed(() => `#${props.name}`)
const iconStyle = computed(() => {
    let style = {}
    if (props.color) {
        style['color'] = props.color
    }
    if (s !== 'px' && s !== '0px') {
        style['fontSize'] = s
    }
    return style
})
const isUrl = computed(() => isExternal(props.name))
const urlIconStyle = computed(() => {
    let style = {
        mask: `url(${props.name}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${props.name}) no-repeat 50% 50%`
    }
    if (s !== 'px') {
        style['width'] = s
        style['height'] = s
    }
    return style
})
</script>

<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
}
</style>
